<template>
    <div class="app-container"> 
        <div>
            <el-button type="success" size="small" @click="add('add')">添加</el-button>
        </div>
        <el-table v-loading="loading" :data="qusetionList" stripe border style="width: 100%; margin-top: 20px; margin-bottom: 20px">
            <el-table-column type="index" label="序号" align="center" width="60">
                <template slot-scope="scope">
                    <span>{{
                        scope.$index + 1 + (queryParams.pageNum - 1) * queryParams.pageSize
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column label="问卷标题" align="center" prop="tikuming" />
            <el-table-column label="问卷状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.isvalid == '1'">有效</span>
                    <span v-if="scope.row.isvalid == '0'">无效</span>
                </template>    
            </el-table-column>
            <el-table-column label="排序号" align="center" prop="orderNum" />
            <el-table-column label="问卷题目" align="center">
                <template slot-scope="scope">
                    <el-button type="success" plain size="mini" @click="getTopic(scope.row)">题目详情</el-button>
                </template>    
            </el-table-column>  
            <el-table-column label="答题情况" align="center">
                <template slot-scope="scope">
                    <el-button type="warning" plain size="mini" @click="getAnswer(scope.row)">答题详情</el-button>
                </template>    
            </el-table-column> 
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" plain size="mini" @click="add('edit',scope.row)">修改问卷</el-button>
                </template>    
            </el-table-column>
        </el-table>
        <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        >
        </el-pagination>



        <!-----添加问卷弹窗----->
        <el-dialog :title="title" :visible.sync="open" width="80%" @closed="closeDia" :z-index="1001">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="问卷标题" prop="quetitle">
                    <el-input
                        v-model="form.quetitle"
                        autocomplete="off"
                        placeholder="请输入问卷标题"
                    ></el-input>
                </el-form-item>
                <el-form-item label="是否有效">
                    <el-radio-group v-model="form.checkpass">
                        <el-radio :label="'1'">是</el-radio>
                        <el-radio :label="'0'">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input-number
                        v-model="form.ordernum"
                        placeholder="请输入排序"
                        @change="handleChange"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('form')">确认</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>    
        </el-dialog> 
        
        
        <!-----题目详情弹窗----->
        <el-dialog title="题目详情" :visible.sync="openTopic" width="80%" :z-index="1001">
            <div>
                <el-button type="success" size="small" @click="addTopic('add')">添加题目</el-button>
            </div>
            <el-table v-loading="loading" :data="topicList" stripe border style="width: 100%; margin-top: 20px; margin-bottom: 20px">
                <el-table-column type="index" label="序号" align="center">
                    <template slot-scope="scope">
                        <span>{{
                            scope.$index + 1 + (topicParams.pageNum - 1) * topicParams.pageSize
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="题目标题" align="center" prop="neirong" />  
                <el-table-column label="题目类型" align="center" width="120"> 
                    <template slot-scope="scope">
                        <span v-if="scope.row.timuleixingid == '1'">单选题</span>
                        <span v-if="scope.row.timuleixingid == '2'">多选题</span>
                        <span v-if="scope.row.timuleixingid == '3'">填空题</span>
                    </template>    
                </el-table-column>  
                <el-table-column label="题目选项" width="600">
                    <template slot-scope="scope">
                        <el-table :data="scope.row.xuanxiangRespList" stripe border style="width: 100%;">
                            <el-table-column label="选项内容" align="center" prop="xuanxiangneirong" />
                            <el-table-column label="排序" align="center" prop="xuanxiangorderNum" width="80"/>
                            <el-table-column label="操作" align="center" width="240">
                                <template slot-scope="scope">
                                    <el-button type="primary" plain size="mini" @click="addItem('edit',scope.row)">修改题目选项</el-button>
                                    <el-button type="danger" plain size="mini" @click="delItem(scope.row)">删除题目选项</el-button>
                                </template>    
                            </el-table-column>
                        </el-table>    
                    </template>    
                </el-table-column>    
                <el-table-column label="排序号" align="center" prop="orderNum" width="80"/>   
                <el-table-column label="操作" align="center" width="320">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="addTopic('edit',scope.row)">修改题目</el-button>
                        <el-button type="danger" size="mini" @click="delTopic(scope.row)">删除题目</el-button>
                        <el-button type="info" size="mini" @click="addItem('add',scope.row)">添加题目选项</el-button>
                    </template>    
                </el-table-column>
            </el-table>
            <!-----添加题目弹窗----->
            <el-dialog width="80%" :title="topicTitle" :visible.sync="innerVisible" append-to-body @close="closeTopic">
                <el-form ref="formTopic" :model="formTopic" :rules="rulesTopic" label-width="120px">
                    <el-form-item label="题目内容" prop="content">
                        <el-input
                            v-model="formTopic.content"
                            autocomplete="off"
                            placeholder="请输入题目内容"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="题目类型" prop="timuleixingid ">
                        <el-select v-model="formTopic.timuleixingid " placeholder="请选择题目类型" @change="changeTopic($event)">
                            <el-option
                                v-for="dict in topictypeList"
                                :key="dict.dictValue"
                                :label="dict.dictLabel"
                                :value="dict.dictValue"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input-number
                            v-model="formTopic.ordernum"
                            placeholder="请输入排序"
                            @change="handleChange"
                        />
                    </el-form-item>
                    <el-form-item label="是否有效">
                        <el-radio-group v-model="formTopic.checkpass">
                            <el-radio :label="'1'">是</el-radio>
                            <el-radio :label="'0'">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitFormtopic('formTopic')">确认</el-button>
                        <el-button @click="cancelTopic">取消</el-button>
                    </el-form-item>
                </el-form>    
            </el-dialog>

            <!----添加题目选项弹窗------>
            <el-dialog width="80%" :title="itemTitle" :visible.sync="itemVisible" append-to-body @close="closeItem">
                <el-form ref="formItem" :model="formItem" :rules="rulesItem" label-width="120px">
                    <el-form-item label="选项内容" prop="content">
                        <el-input
                            v-model="formItem.content"
                            autocomplete="off"
                            placeholder="请输入题目选项内容"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input-number
                            v-model="formItem.ordernum"
                            placeholder="请输入排序"
                            @change="handleChange"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitFormitem('formItem')">确认</el-button>
                        <el-button @click="cancelItem">取消</el-button>
                    </el-form-item>
                </el-form>    
            </el-dialog>    
            
        </el-dialog>    


        <!-----答题详情弹窗----->
        <el-dialog title="答题情况" :visible.sync="openAnswer" width="80%" :z-index="1001">
            <el-table v-loading="loading" :data="answerList" stripe border style="width: 100%; margin-top: 20px; margin-bottom: 20px">
                <el-table-column type="index" label="序号" align="center">
                    <template slot-scope="scope">
                        <span>{{
                            scope.$index + 1 + (topicParams.pageNum - 1) * topicParams.pageSize
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="题目标题" align="center" prop="neirong" />  
                <el-table-column label="题目类型" align="center" width="120"> 
                    <template slot-scope="scope">
                        <span v-if="scope.row.timuleixingid == '1'">单选题</span>
                        <span v-if="scope.row.timuleixingid == '2'">多选题</span>
                        <span v-if="scope.row.timuleixingid == '3'">填空题</span>
                    </template>    
                </el-table-column>  
                <el-table-column label="选项答案" width="600">
                    <template slot-scope="scope">
                        <el-table v-if="scope.row.timuleixingid != '3'" :data="scope.row.xuanxiangRespList" stripe border style="width: 100%;">
                            <el-table-column label="选项内容" align="center" prop="xuanxiangneirong" />
                            <el-table-column label="选择数量" align="center" prop="count" width="80"/>
                        </el-table> 
                        <el-table v-else :data="scope.row.daAn" stripe border style="width: 100%;">
                            <el-table-column label="答案内容" align="center">
                                <template slot-scope="scopeProp">
                                    {{ scopeProp.row }}
                                </template>    
                            </el-table-column>    
                        </el-table>                         
                    </template>    
                </el-table-column>    
                <el-table-column label="排序号" align="center" prop="orderNum" width="80"/>   
            </el-table>
        </el-dialog>    

    </div>
</template> 

<script>
import { 
    getQuestuin, //查询问卷 
    addQuestuin, // 添加问卷
    getQuestuinone, 
    editQuestuin, 
    addTopicone, 
    topicType, 
    getQuesTopic, 
    getTopicone, 
    editTopicone, 
    delTopicone, // 删除题目
    addTopicitem, // 新增题目选项
    getTopicitemone,
    editTopicitem,
    delTopicitem, // 删除题目选项
    getAnswerTopic // 一张问卷的答题情况  
} from "@/api/yxzx/info";

export default {
    name: "question",
    data() {
      return {
        loading: true,
        qusetionList: [],
        total: 0,
        queryParams: {
            pageNum: 1,
            pageSize: 15,
            isvalid: ''
        },
        open: false,
        title: '',
        tkid: '',
        form: {
            quetitle: '',
            checkpass: '',
            ordernum: undefined
        },
        rules: {
            quetitle: [{
                required: true, message: "请输入问卷标题", trigger: "blur"
            }]
        },
        qus_title: '',
        queryQues:{},
        openTopic: false,
        topicList: [],
        topicParams: {
            pageNum: 1,
            pageSize: 15
        },
        innerVisible: false,
        topicTitle: '',
        formTopic: {
            content: '',
            checkpass: '',
            ordernum: undefined,
            timuleixingid: '', 
        },
        rulesTopic: {
            content: [{
                required: true, message: "请输入题目内容", trigger: "blur"
            }],
            timuleixingid : [{
                required: true, message: "请选择题目类型", trigger: "change"
            }]
        },
        topictypeList: [],  // 题目类型
        queryTopic:{}, // 添加题目传参
        tmid: '', //题目id
        itemTitle: '',
        itemVisible: false,
        formItem:{
            content: '',
            ordernum: undefined
        },
        rulesItem:{
            content: [{
                required: true, message: "请输入题目内容", trigger: "blur"
            }],
        },
        queryItem:{},
        itemId: '',
        openAnswer: false,
        answerList: [],
      }
    },
    created() {
        this.getList()
    },
    methods: {
        getList(){
            getQuestuin(this.queryParams.pageNum,this.queryParams.pageSize,this.queryParams.isvalid).then(response => {
                this.loading = false,
                this.qusetionList = response.rows
                this.total = response.total
            })    
        },
        // 清空添加问卷表单
        resetForm(){
            this.$refs['form'].resetFields();
            this.form.quetitle = ''
            this.form.checkpass = ''
            this.form.ordernum = undefined
        },
        // 清空添加题目表单
        resetTopic(){
            this.$refs['formTopic'].resetFields();
            this.formTopic.content = ''
            this.formTopic.checkpass = ''
            this.formTopic.ordernum = undefined
            this.formTopic.timuleixingid  = ''
        },
        // 清空添加题目选项表单
        resetTopicItem(){
            this.$refs['formItem'].resetFields();
            this.formItem.content = ''
            this.formItem.ordernum = undefined
        },
        /** 分页 */
        handleSizeChange(val) {
            this.queryParams.pageNum = val;
            this.getList();
        },
        /** 添加事件 */
        add(name,val){
            this.open = true
            this.qus_title = name
            if(name == 'add'){
                this.title = '新增问卷'
            } else if(name == 'edit'){
                this.title = '修改问卷'
                this.tkid = val.tikuid
                getQuestuinone(val.tikuid).then(response => {
                    this.form.quetitle = response.data.tikuming
                    this.form.checkpass = response.data.isvalid
                    this.form.ordernum = response.data.orderNum
                })
            }          
        },
        // 添加问卷弹窗关闭回调
        closeDia(){
            this.form.quetitle = ''
            this.form.checkpass = ''
            this.form.ordernum = undefined
        },
        /** 改变数字 */
        handleChange(val) {
            this.form.ordernum = val;
        },
        // 添加问卷提交按钮
        submitForm(formName) {
            this.queryQues.tikuming = this.form.quetitle
            this.queryQues.isvalid = this.form.checkpass
            this.queryQues.orderNum = this.form.ordernum
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.qus_title == 'add'){
                        addQuestuin(this.queryQues).then(response => {
                            this.$modal.msgSuccess("问卷添加成功");
                            this.open = false
                            this.resetForm()
                            this.getList()
                        })
                    } else if (this.qus_title == 'edit'){
                        const obj = {}
                        obj.tikuid = this.tkid
                        obj.tikuming = this.form.quetitle
                        obj.isvalid = this.form.checkpass
                        obj.orderNum = this.form.ordernum
                        editQuestuin(obj).then(response => {
                            this.$modal.msgSuccess("问卷修改成功");
                            this.open = false
                            this.resetForm()
                            this.getList()
                        })
                    }                
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 添加问卷取消按钮
        cancel(){
            this.open = false
            this.form.quetitle = ''
            this.form.checkpass = ''
            this.form.ordernum = undefined
        },
        // 查看答题情况
        getAnswer(val){
            this.openAnswer = true
            getAnswerTopic(val.tikuid).then(response => {
                this.answerList = response.data.wenjuanTimuList                           
            })
        },
        // 查看题目详情按钮
        getTopic(val){
            this.tkid = val.tikuid
            this.openTopic = true
            this.getTopicList()
        },
        getTopicList(){
            this.topicList = []
            const obj = {}
            obj.tikuid = this.tkid
            obj.isvalid = ''
            getQuesTopic(this.tkid, '').then(response => {
                if(response.data){
                    this.topicList = response.data.wenjuanTimuList 
                } else {
                    return
                }                            
            })
        },
        // 添加题目按钮
        addTopic(name,val){
            this.innerVisible = true
            this.getTopictype()
            if(name == 'add'){
                this.topicTitle = '添加题目'
            } else if (name == 'edit'){
                this.tmid = val.timuid
                this.topicTitle = '修改题目'
                getTopicone(val.timuid).then(response => {
                    console.log(response.data)
                    this.formTopic.content = response.data.neirong
                    this.formTopic.checkpass = response.data.isvalid
                    this.formTopic.ordernum = response.data.orderNum
                    this.formTopic.timuleixingid  = response.data.timuleixingid                
                })

            }
        },
        // 删除题目按钮
        delTopic(val){
            this.$confirm('您确定要删除该条题目吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                delTopicone(val.timuid).then(response => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    }); 
                    this.getTopicList()            
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });

        },
        // 添加题目取消按钮
        cancelTopic(){
            this.innerVisible = false
            this.resetTopic()
        },
        closeTopic(){
            this.innerVisible = false
            this.resetTopic()
        },
        // 添加题目确定消按钮
        submitFormtopic(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.topicTitle == '添加题目'){
                        this.queryTopic.tikuid = this.tkid
                        this.queryTopic.timuleixingid = this.formTopic.timuleixingid
                        this.queryTopic.neirong = this.formTopic.content
                        this.queryTopic.orderNum = this.formTopic.ordernum
                        this.queryTopic.isvalid = this.formTopic.checkpass
                        addTopicone(this.queryTopic).then(response => {
                            this.$modal.msgSuccess("题目添加成功");
                            this.innerVisible = false
                            this.resetTopic()
                            this.getTopicList()
                        })

                    } else if (this.topicTitle == '修改题目'){
                        const obj = {}
                        obj.timuid = this.tmid
                        obj.tikuming = this.form.quetitle
                        obj.timuleixingid = this.formTopic.timuleixingid
                        obj.neirong = this.formTopic.content
                        obj.orderNum = this.formTopic.ordernum
                        obj.isvalid = this.formTopic.checkpass
                        editTopicone(obj).then(response => {
                            this.$modal.msgSuccess("题目修改成功");
                            this.innerVisible = false
                            this.resetTopic()
                            this.getTopicList()
                        })

                    }
                                    
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 题目类型字典查询
        getTopictype(){
            topicType().then(response => {
                this.topictypeList = response.rows
            })
        },
        changeTopic(val){
            this.queryTopic.timuleixingid = val
        },
        // 添加题目选项按钮
        addItem(name,val){
            this.itemVisible = true
            this.queryItem.timuid = val.timuid
            if(name == 'add'){
                console.log(val)
                this.itemTitle = '新增题目选项'
            } else if(name == 'edit'){
                this.itemTitle = '修改题目选项'
                this.itemId = val.xuanxiangid
                getTopicitemone(val.xuanxiangid).then(response => {
                    this.formItem.content = response.data.neirong
                    this.formItem.ordernum = response.data.orderNum
                })
            }
        },
        // 删除题目选项按钮
        delItem(val){
            this.$confirm('您确定要删除该条题目选项吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                delTopicitem(val.xuanxiangid).then(response => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    }); 
                    this.getTopicList()            
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        closeItem(){
            this.itemVisible = false
            this.resetTopicItem()
        },
        // 添加题目选项取消按钮
        cancelItem(){
            this.itemVisible = false
            this.resetTopicItem()
        },
        submitFormitem(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.itemTitle == '新增题目选项'){
                        this.queryItem.neirong = this.formItem.content
                        this.queryItem.orderNum = this.formItem.ordernum
                        addTopicitem(this.queryItem).then(response => {
                            this.$modal.msgSuccess("题目选项添加成功");
                            this.itemVisible = false
                            this.resetTopicItem()
                            this.getTopicList() 
                        })
                    } else if (this.itemTitle = '修改题目选项'){
                        const obj = {}
                        obj.xuanxiangid = this.itemId
                        obj.neirong = this.formItem.content
                        obj.orderNum = this.formItem.ordernum
                        console.log(obj)
                        editTopicitem(obj).then(response => {
                            this.$modal.msgSuccess("题目选项修改成功");
                            this.itemVisible = false
                            this.resetTopicItem()
                            this.getTopicList()
                        })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })
        },
        /** 分页 */
        handleCurrentChange(val) {
        this.queryParams.pageNum = val;
        this.getList();
        },
        handleSizeChange(val) {
        this.queryParams.pageSize = val;
        this.getList();
        },

    }  
}
</script>   